<template>
	<!-- title部分 -->
	<view class="title">
		<view class="title_leftbox" @click="goToIndex">
			<image class="title_leftbox_image_fanhui" src="../../static/返回.png"></image>
		</view>
		<view class="title_middlebox">
			<view class="title_middlebox_text">走势图表</view>
		</view>
		<view class="title_rightbox">
			<view class="title_rightbox_text"></view>
		</view>
	</view>
	<view class="nrbox">
		<view class="nrbox_textbox">
			<view class="nrbox_textbox1">
				<view class="nrbox_textbox_text1">福彩</view>
			</view>
			<view class="nrbox_boxhz2">
				<view class="nrbox_textbox2">
					<view class="nrbox_textbox2_text">双色球走势图</view>
					<view class="nrbox_textbox2_text">快乐8走势图</view>
					<view class="nrbox_textbox2_text">福彩3D走势图</view>
					<view class="nrbox_textbox2_text">七乐彩走势图</view>
				</view>
			</view>
		</view>


		<view class="nrbox_textbox">
			<view class="nrbox_textbox1">
				<view class="nrbox_textbox_text1">体彩</view>
			</view>
			<view class="nrbox_boxhz2">
				<view class="nrbox_textbox2">
					<view class="nrbox_textbox2_text">大乐透走势图</view>
					<view class="nrbox_textbox2_text">排列三走势图</view>
					<view class="nrbox_textbox2_text">排列五走势图</view>
					<view class="nrbox_textbox2_text">七星彩走势图</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			// 跳转到首页的方法
			goToIndex() {
				// 在tabbar中使用uniapp的switchTab方法跳转
				uni.switchTab({
					url: '/pages/index/index', // 首页路径
				});
			},
		}
	}
</script>

<style>
	/* 以下是title部分样式 */
	.title {
		background-color: rgb(226, 50, 52);
		display: flex;
		align-items: center;
		justify-content: space-between;
		/* 使左右盒子分别位于两侧 */
		padding: 2%;
	}

	.title_leftbox {
		display: flex;
		align-items: center;
		justify-content: center;
		/* 使图标居中 */
	}

	.title_leftbox_image_fanhui {
		width: 17px;
		height: 17px;
	}

	.title_middlebox {
		flex-grow: 1;
		/* 使中间盒子占据剩余空间 */
		display: flex;
		align-items: center;
		justify-content: center;
		/* 使文本居中 */
	}

	.title_middlebox_text {
		font-size: 15px;
		color: white;
		font-weight: 900;
	}

	.title_rightbox {
		display: flex;
		align-items: center;
		justify-content: center;
		/* 使文本居中 */
	}

	.title_rightbox_text {
		color: white;
	}

	/* 这是核心内容部分 */
	.nrbox_textbox {
		padding: 5% 2% 2% 2%;
	}

	.nrbox_textbox1 {
		margin-bottom: 5px;
		font-size: 19px;
		font-weight: 900;
		padding: 2%;
	}

	.nrbox_textbox_text1 {}

	.nrbox_boxhz2 {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.nrbox_textbox2 {
		display: flex;
		flex-wrap: wrap;
		/* width: 100%; */
		align-items: center;
		justify-content: space-between;
	}

	.nrbox_textbox2_text {
		padding: 3% 8%;
		border-radius: 43px;
		border: 1px solid #4e5c7c;
		width: 30%;
		margin-bottom: 14px;
		text-align: center;
	}
</style>
